<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="../src/ruler.css" />

    <script src="jquery-1.7.1.js"></script>
    <script src="jquery.event.drag-2.2.js"></script>
    <script src="jquery.event.drop-2.2.js"></script>
    <script src="../src/ruler.js"></script>

    <style type="text/css">
        #rulerOuter {
            width : 600px;
            height : 300px;
            position: relative;
        }

        #rulerInner {
            width: 5000px;
            height: 5000px;
        }
    </style>
</head>
<body>
<h2>Ruler使用示例</h2>
<div id="rulerOuter">
    <div id="rulerInner"></div>
</div>

<script type="text/javascript">
    new Ruler().wrap('rulerInner');
</script>

</body>
</html>